<template>
	<view class="creator">
		<u-line color="info"></u-line>
		<view class="creator-time-picker bgc-f8" @click="show = true" :startYear="startYear" :endYear="endYear">
			<view class="creator-time-picker-title fillx bsp10">
				时间筛选
				<view class="creator-time-picker-show iconfont icon-shangxiajiantou">
					{{chooseDate===''?now:chooseDate}}
				</view>
			</view>
			<u-picker v-model="show" mode="time" :params="params" @confirm="confirm"></u-picker>
		</view>
		<u-line color="info"></u-line>
		<view class="creator-list fillx bgc-f8">
			<view class="creator-list-title fillx bsp10">
				<view class="creator-total frsc">
					本月总计： <u-count-to :start-val="0" :end-val="total" duration="1500" font-size="36"></u-count-to><!-- {{total}} --> <text class="margin_l10 mr">元</text>
				</view>
			</view>
			<view class="creator-list-table">
				<u-table bg-color="#f2f2f2">
						<u-tr>
							<u-th>序号</u-th>
							<u-th>姓名</u-th>
							<u-th><view class="iconfont icon-shangxiajiantou" @click="changeSort">金额</view></u-th>
						</u-tr>
						<u-tr v-for="(item,index) in tableList" :key="item.name+item.amount+index">
							<u-td>{{index+1}}</u-td>
							<u-td>{{item.name}}</u-td>
							<u-td>{{item.amount}}</u-td>
						</u-tr>
					</u-table>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				show: false,
				params:{
					year: true,
					month: true,
					day: false,
					hour: false,
					minute: false,
					second: false,
					sort:true
				},
				chooseDate:'',
				tableList:[
					{name:'张三',amount:9999},
					{name:'蔡虚鲲',amount:1212},
					{name:'李四',amount:8888},
					{name:'赵五',amount:6666},
					
					{name:'赵五',amount:6661},
					{name:'赵五',amount:6662},
					{name:'赵五',amount:6663},
					{name:'赵五',amount:6664},
					{name:'赵五',amount:6665},
					{name:'赵五',amount:6666},
					{name:'赵五',amount:6667},
					{name:'赵五',amount:6668},
					{name:'赵五',amount:6669},
					{name:'赵五',amount:6660},
					{name:'赵五',amount:6616},
					{name:'赵五',amount:6626},
					{name:'赵五',amount:6636},
					{name:'赵五',amount:6646},
					{name:'赵五',amount:6656},
					{name:'赵五',amount:6666},
					{name:'赵五',amount:6676},
					{name:'赵五',amount:6686},
					{name:'赵五',amount:6696},
					{name:'赵五',amount:6606},
					{name:'赵五',amount:6166},
					{name:'赵五',amount:6266},
					{name:'赵五',amount:6366},
					{name:'赵五',amount:6466},
					{name:'赵五',amount:6566},
					{name:'赵五',amount:6666},
					{name:'赵五',amount:6766},
					{name:'赵五',amount:6866},
					{name:'赵五',amount:6966},
					{name:'赵五',amount:6066},
					{name:'赵五',amount:6666},
					{name:'赵五',amount:6666},
					{name:'赵五',amount:6666},
					{name:'赵五',amount:6666},
					{name:'赵五',amount:6666},
					{name:'赵五',amount:6666},
					{name:'赵五',amount:6666},
					{name:'赵五',amount:6666},
					{name:'赵五',amount:6666},
					{name:'赵五',amount:6666},
					{name:'赵五',amount:6666},
					{name:'赵五',amount:6666},
					{name:'赵五',amount:6666},
					{name:'赵五',amount:6666},
					{name:'赵五',amount:6666},
					{name:'赵五',amount:6666}
					]
			}
		},
		methods: {
			confirm(obj){
				let year=obj.year
				let month=obj.month
				let chooseDate=year+'-'+month
				this.chooseDate=chooseDate
				uni.showToast({
					title:'选择了'+this.chooseDate,
					icon:'none'
				})
			},
			changeSort(){
				if(this.sort){
					this.tableList.sort((a,b)=>a.amount-b.amount)
					this.sort=false
				}else{
					this.tableList.sort((a,b)=>b.amount-a.amount)
					this.sort=true
				}
			}
		},
		computed:{
			now(){
				let now=new Date()
				let year=now.getFullYear()
				let month=now.getMonth()+1
				month=month>9?month:'0'+month
				return year+'-'+month
			},
			startYear(){
				let now=new Date()
				let year=now.getFullYear()
				return year-3
			},
			endYear(){
				let now=new Date()
				let year=now.getFullYear()
				return year
			},
			total(){
				return this.tableList.reduce((n,a)=>n+a.amount,0)
			}
		}
	}
</script>

<style scoped>
	.bgc-f8{
		background-color: #f8f8f8;
	}
	.margin_l10{
		margin-left: 20px;
	}
	.creator{
		width: 100vw;
		height: 100vh;
		background-color: #d7d7d7;
	}
	.creator-time-picker-title{
		font-size: 16px;
		padding: 15px 10px;
		position: relative;
		box-sizing: border-box;
		/* border-top:3px solid #d7d7d7;
		border-bottom:3px solid #d7d7d7 ; */
	}
	.creator-time-picker-show{
		position: absolute;
		top: 50%;
		right: 10px;
		transform: translateY(-50%);
		background-color: #e1e1e1;
		padding: 5px;
		border-radius: 1vw;
	}
	.creator-list-title{
		padding: 10px;
		border-bottom: 1px solid #d7d7d7;
	}
	.creator-tax{
		margin-left: 50px;
	}
	.creator-list-table{
		box-sizing: border-box;
		padding: 5px 20px;
		background-color: #d7d7d7;
	}
</style>
